<template>
  <div>
    <MyHead></MyHead>
    <van-tabs v-model="active" swipeable id="singer-tab">
      <van-tab title="扣扣音乐">
        <div class="singer">
          <van-index-bar :index-list="rightList">
            <div v-for="item in list" :key="item.Findex">
              <van-index-anchor :index="item.Findex">{{
                item.Findex
              }}</van-index-anchor>
              <ul>
                <li
                  v-for="(liItem, liIndex) in item.list"
                  :key="liIndex"
                  @click="jump(liItem)"
                >
                  <img v-lazy="liItem.avatorUrl" alt="" />
                  <p>{{ liItem.Fsinger_name }}</p>
                  <div class="btn"></div>
                </li>
              </ul>
            </div>
          </van-index-bar></div
      ></van-tab>
      <van-tab title="千千音乐歌手">
        <div class="singer">
          <van-index-bar :index-list="rightListqq">
            <div v-for="item in listqq" :key="item.firstletter">
              <van-index-anchor :index="item.firstletter">{{
                item.firstletter
              }}</van-index-anchor>
              <ul>
                <li
                  v-for="(liItem, liIndex) in item.list"
                  :key="liIndex"
                  @click="jumpqq(liItem)"
                >
                  <img
                    v-lazy="
                      liItem.pic
                        ? liItem.pic
                        : 'https://static2-qianqian.91q.com/client/img/31b35b2.jpg'
                    "
                    alt=""
                  />
                  <p>{{ liItem.name }}</p>
                  <div class="btn"></div>
                </li>
              </ul>
            </div>
          </van-index-bar></div
      ></van-tab>
    </van-tabs>
  </div>
</template>
<script>
import { getSingers, getSingersqq } from "./service";
import { handleData, handleDataqq } from "./index";
import MyHead from "../../components/MyHead.vue";
export default {
  components: {
    MyHead,
  },
  data() {
    return {
      listqq: [],
      list: [],
      active: 2,
    };
  },
  methods: {
    // 千千音乐歌单接口问题 歌手详情为假
    jumpqq(item) {
      const { artistCode, name, pic } = item;
      this.$router.history.push(
        `/detailq/${artistCode}?name=${name}&img=${pic}`
      );
    },
    // 真线上歌单接口
    jump(item) {
      const { Fsinger_mid, Fsinger_name, avatorUrl } = item;
      this.$router.history.push(
        `/detail/${Fsinger_mid}?name=${Fsinger_name}&img=${avatorUrl}`
      );
    },
    async initDataqq() {
      const { data } = (await getSingersqq()) || {};
      this.listqq = handleDataqq(data.result || []);
      console.log(data, "mock假");
    },
    async initData() {
      const { code, data } = (await getSingers()) || {};
      if (code) return false;
      this.list = handleData(data.list || []);
      console.log(this.list);
    },
  },
  computed: {
    rightListqq() {
      return this.listqq.map((item) => item.firstletter);
    },
    rightList() {
      return this.list.map((item) => item.Findex);
    },
  },
  mounted() {},
  created() {
    this.initDataqq();
    this.initData();
  },
};
</script>
<style lang="less" scoped>
@import "styles/index.less";
// 去掉滚动条
.singer::-webkit-scrollbar {
  display: none;
}
/deep/ .van-tabs__line {
  background-color: gold;
  .w(60);
}
/deep/ .van-tab {
  background: #222;
  color: #fff;
}
/deep/ .van-tab--active {
  color: #fff;
  background: rgb(51, 51, 51);
}
#singer-tab {
  .margin-top(82);
}
.singer {
  .padding-bottom(60);
  background: #000;
  overflow-y: scroll;
  position: fixed;
  .top(126);
  .left(0);
  .right(0);
  .bottom(0);
  ::v-deep .van-index-anchor {
    background: #333333;
    color: hsla(0, 0%, 100%, 0.5);
    z-index: 3;
  }
  /deep/ .van-index-bar__index {
    .padding(3,3,3,3);
    line-height: 1;
    color: hsla(0, 0%, 100%, 0.5);
    font-size: 12px;
  }
  /deep/ .van-index-bar__index--active {
    color: #ffcd32;
  }
  ul {
    li {
      .w(375);
      .h(70);
      display: flex;
      align-items: center;
      justify-content: space-between;
      .padding(10,20,10,20);
      color: #fff;
      font-size: 14px;
      p {
        .margin-left(20);
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        display: block;
        .w(235);
      }
      img {
        border-radius: 50%;
        overflow: hidden;
        .w(50);
        .h(50);
      }
      .btn {
        position: relative;
        z-index: 2;
        font-size: 12px;
        flex: 0 0 auto;
        .w(35);
        .h(35);
        .line-height(35);
        .border-radius(40);
        color: #fff;
        .padding(10,10,10,10);
        .margin-right(8);
        background-image: url(https://static2-qianqian.91q.com/client/img/fef5022.png);
        background-size: 50% 50%;
        background-position: 50%;
        background-color: #1c1c1e;
        background-repeat: no-repeat;
      }
    }
  }
}
</style>
